{# itop-portal-base/portal/src/views/bricks/browse/mode_grid.html.twig #}
{# Browse brick grid mode layout #}
{% extends 'itop-portal-base/portal/src/views/bricks/browse/layout.html.twig' %}

{% block bBrowseMainContent %}
	<div id="brick_content_grid">
		{% block bBrowseGridContent %}
			<div class="grid-group" data-level-id="L">
			</div>
		{% endblock %}
	</div>

	<div id="brick_content_empty" class="text-center">
		{% block bBrowseGridEmpty %}
			{{ 'Brick:Portal:Browse:Filter:NoData'|dict_s }}
		{% endblock %}
	</div>
	<div id="brick_grid_overlay">
		{% block bBrowseGridOverlay %}
			<div class="overlay_content">
				{% include 'itop-portal-base/portal/src/views/helpers/loader.html.twig' %}
			</div>
		{% endblock %}
	</div>
{% endblock %}

{% block pPageLiveScripts %}
	{{ parent() }}
	
	<script type="text/javascript">
		var sBrowseMode = '{{ sBrowseMode }}';
		var oLevelsProperties = {{ aLevelsProperties|raw }};
		var oRawDatas = {{ aItems|raw }};
        var sGridEffectName = 'fade';
        var oGridEffectOptions = {};
        var iGridEffectDuration = 200;

        // Show a loader over the grid
		var showGridLoader = function()
		{
			$("#brick_content_grid").hide();
			$('#brick_grid_overlay').show();
		};
		// Hide the loader over the tree
		var hideGridLoader = function()
		{
			$('#brick_grid_overlay').hide();
			$("#brick_content_grid").show();
		}
		// Registers the toggle listeners on the tree nodes. Used after every AJAX calls.
		var registerToggleListeners = function()
		{
		    $('#brick_content_grid .grid-drilldown').off('click').on('click', function (oEvent) {
				oEvent.preventDefault();

				var me = this;
				// Retrieving sublevel
                var sublevelId = $(this).attr('data-level-alias') + '::' + $(this).attr('data-item-id');
                var sublevelElem = $('#brick_content_grid .grid-group[data-level-id="'+sublevelId+'"]');

				// Hidding current level
                if(sublevelElem.length === 0)
                {
                    showGridLoader();
                }
                $(this).closest('.grid-group').hide(
                    sGridEffectName,
					oGridEffectOptions,
					iGridEffectDuration,
					function(){
				        // Showing sublevel
				        if(sublevelElem.length === 0)
						{
                            loadChildNodes($(me).attr('data-level-alias'), $(me).attr('data-item-id'));
						}
						else
						{
                            sublevelElem.show(sGridEffectName, oGridEffectOptions, iGridEffectDuration);
						}
					}
				);
			});

            $('#brick_content_grid .grid-rollup').off('click').on('click', function (oEvent) {
                oEvent.preventDefault();

                // Retrieving upper level
                var upperlevelId = $(this).attr('data-level-id');
                var upperlevelElem = $('#brick_content_grid .grid-group[data-level-id="'+upperlevelId+'"]');

                // Hidding current level
                $(this).closest('.grid-group').hide(
                    sGridEffectName,
					oGridEffectOptions,
					iGridEffectDuration,
                    function(){
                        // Showing upper level
                        if(upperlevelElem.length === 0)
                        {
                            var upperlevelIdParts = upperlevelId.split('::');

                            loadChildNodes(upperlevelIdParts[0], upperlevelIdParts[1]);
                        }
                        else
                        {
                            upperlevelElem.show(sGridEffectName, oGridEffectOptions, iGridEffectDuration);
                        }
                    }
                );
            });
		};
		// Registers the filter listeners on the tree.
		var registerFilterListeners = function()
		{
			/*$('#brick_search_field').treeListFilter('#brick_content_grid', iSearchDelay, filterResultsHandler);*/
		};
		// Load current node childnodes throught AJAX
		var loadChildNodes = function(sLevelAlias, sNodeId)
		{
			var sUrl = '{{ app.url_generator.generate('p_browse_brick_mode_tree', {'sBrickId': sBrickId, 'sBrowseMode': sBrowseMode, 'sLevelAlias': '-sLevelAlias-', 'sNodeId': '-sNodeId-'})|raw }}';
			sUrl = sUrl.replace(/-sLevelAlias-/, sLevelAlias).replace(/-sNodeId-/, sNodeId);

            $.ajax(sUrl)
			.done(function(data) {
				// Building child nodes
				for(index in data.data)
				{
					var sublevel = data.data[index];
					var sublevelData = {};
					sublevelData[sublevel.level_alias+"::"+sublevel.id] = sublevel;
					buildGrid(sublevelData, sLevelAlias+"::"+sNodeId, false);
				}
				// Showing sublevel
                $('#brick_content_grid .grid-group[data-level-id="'+sLevelAlias+"::"+sNodeId+'"]').show(sGridEffectName, oGridEffectOptions, iGridEffectDuration);

				registerToggleListeners();
			})
			.fail(function() {
				alert('{{ 'Error:XHR:Fail'|dict_s }}');
			})
			.always(function(){
                hideGridLoader();
			});
		};
		// Build tree nodes from data under the nodeId
		var buildGrid = function(data, nodeId, isRootLevel)
		{
		    if(nodeId === undefined)
			{
				// We are on the root node
				nodeId = 'L';
			}
			if(isRootLevel === undefined)
			{
				isRootLevel = true;
			}

			// Building node if necessary
			if($('div[data-level-id="'+nodeId+'"]').length === 0)
			{
                $('#brick_content_grid').append( $('<div></div>').addClass('grid-group').attr('data-level-id', nodeId) );
			}

			if(!isRootLevel)
			{
			    // Retrieving upper level id
                var levelIdParts = nodeId.split('::');
                var upperlevelId = $('.grid-item[data-level-alias="'+levelIdParts[0]+'"][data-item-id="'+levelIdParts[1]+'"]').closest('.grid-group').attr('data-level-id');

                // Building back button
                if( $('div[data-level-id="'+nodeId+'"] .grid-group-back').length === 0 ) {
                    var backElem = $('<div></div>').addClass('grid-group-item').addClass('grid-group-back');
                    var aElem = $('<a></a>').addClass('grid-item').addClass('grid-rollup').attr('href', '#').attr('data-level-id', upperlevelId).html('<div class="grid-item-text"><span class="glyphicon glyphicon-arrow-left"></span></div>');

                    backElem.append(aElem);
                    $('div[data-level-id="' + nodeId + '"]').append(backElem);
                }
			}
			else
			{
                $('div[data-level-id="'+nodeId+'"]').html('');
			}
			
			$.each(data, function(i, item){
				var levelId = item.level_alias+'::'+item.id;
				var levelAltId = item.level_alias+'_'+item.id;
				var levelActions = oLevelsProperties[item.level_alias].actions;
				var levelActionsKeys = Object.keys(levelActions);
				var levelPrimaryAction = levelActions[levelActionsKeys[0]];
				var url = '';

                // Building node
                var itemElem  = $('<div></div>').addClass('grid-group-item');
				var aElem   = $('<a></a>').addClass('grid-item').attr('data-item-id', item.id).attr('href', '#').attr('data-level-alias', item.level_alias);
				var iItemFlags = 0;
                // - Adding stub div
				var textElem = $('<div></div>').addClass('grid-item-text');
                // - Adding image
                if( (item.image !== undefined) && (item.image !== '') )
                {
                    iItemFlags += 4;
                    aElem.append( $('<div></div>').addClass('grid-item-image').append( $('<img />').attr('src', item.image) ) );
                }
                // - Adding name
                if( (item.name !== undefined) && (item.name !== '') )
                {
                    iItemFlags += 1;
                    textElem.append( $('<div></div>').addClass('grid-item-name').text(item.name) );
                }
                // - Adding description
                if( (item.description !== undefined) && (item.description !== '') )
                {
                    iItemFlags += 2;
                    textElem.append( $('<div></div>').addClass('grid-item-description').text(item.description) );
				}
                aElem.append( textElem );
				// - Adding CSS class to adjust the layout regarding which properties are available
				aElem.addClass('grid-item-layout-'+iItemFlags);
                // - Appending element
				$('div[data-level-id="'+nodeId+'"]').append(itemElem);
				itemElem.append(aElem);
				
				// Building tooltip for the node
				if( (item.tooltip !== undefined) && (item.tooltip !== '') )
				{
					aElem.attr('title', item.tooltip).attr('data-toggle', 'tooltip').tooltip({html: true, trigger: 'hover', placement: 'top'});
				}
				
				// Building actions for that node
				switch(levelPrimaryAction.type)
				{
					case '{{ constant('Combodo\\iTop\\Portal\\Brick\\BrowseBrick::ENUM_ACTION_DRILLDOWN') }}':
						aElem.addClass('grid-drilldown');
						break;
					case '{{ constant('Combodo\\iTop\\Portal\\Brick\\BrowseBrick::ENUM_ACTION_VIEW') }}':
						url = '{{ app.url_generator.generate('p_object_view', {'sObjectClass': '-objectClass-', 'sObjectId': '-objectId-'})|raw }}'.replace(/-objectClass-/, item.class).replace(/-objectId-/, item.id);
						aElem.attr('data-toggle', 'modal').attr('data-target', '#modal-for-all').attr('href', url);
						break;
					case '{{ constant('Combodo\\iTop\\Portal\\Brick\\BrowseBrick::ENUM_ACTION_EDIT') }}':
						url = '{{ app.url_generator.generate('p_object_edit', {'sObjectClass': '-objectClass-', 'sObjectId': '-objectId-'})|raw }}'.replace(/-objectClass-/, item.class).replace(/-objectId-/, item.id);
						aElem.attr('data-toggle', 'modal').attr('data-target', '#modal-for-all').attr('href', url);
						break;
					case '{{ constant('Combodo\\iTop\\Portal\\Brick\\BrowseBrick::ENUM_ACTION_CREATE_FROM_THIS') }}':
						url = levelPrimaryAction.url.replace(/-objectClass-/, item.class).replace(/-objectId-/, item.id);
						url = AddParameterToUrl(url, 'ar_token', item.action_rules_token[levelPrimaryAction.type]);
						aElem.attr('data-toggle', 'modal').attr('data-target', '#modal-for-all').attr('href', url);
						break;
					default:
						//console.log('Action "'+levelPrimaryAction.type+'" not implemented for primary action');
						break;
				}
				
				if(levelActionsKeys.length > 1)
				{
					// Retrieving secondary action
					var actionsButtons = {};
					for(j = 1; j < levelActionsKeys.length; j++)
					{
						actionsButtons[levelActionsKeys[j]] = levelActions[levelActionsKeys[j]];
					}
					
					// Preparing secondary actions container
					var actionsElem = $('<div></div>').addClass('grid-group-item-actions');
					itemElem.append(actionsElem);
					// Checking if a menu is necessary
					var bHasSeveralSecondaryActions = (Object.keys(actionsButtons).length > 1);
					// Preparing secondary actions menu
					if(bHasSeveralSecondaryActions)
					{
						var actionsSSTogglerElem = $('<a class="glyphicon glyphicon-menu-hamburger" data-toggle="collapse" data-target="#item-actions-menu-'+levelAltId+'"></a>');
						var actionsSSMenuElem = $('<div id="item-actions-menu-'+levelAltId+'" class="item-action-wrapper panel panel-default"></div>');
						var actionsSSMenuContainerElem = $('<div class="panel-body"></div>');
						actionsSSMenuElem.append(actionsSSMenuContainerElem);
						actionsElem.append(actionsSSTogglerElem);
						actionsElem.append(actionsSSMenuElem);
					}
					
					// Adding secondary actions
					for(j in actionsButtons)
					{
						var action = actionsButtons[j];
						var actionElem = $('<a></a>');
						var actionIconElem = $('<span></span>').appendTo(actionElem);
						
						switch(action.type)
						{
							case '{{ constant('Combodo\\iTop\\Portal\\Brick\\BrowseBrick::ENUM_ACTION_VIEW') }}':
								url = '{{ app.url_generator.generate('p_object_view', {'sObjectClass': '-objectClass-', 'sObjectId': '-objectId-'})|raw }}'.replace(/-objectClass-/, item.class).replace(/-objectId-/, item.id);
								actionElem.attr('data-toggle', 'modal').attr('data-target', '#modal-for-all').attr('href', url);
								break;
							case '{{ constant('Combodo\\iTop\\Portal\\Brick\\BrowseBrick::ENUM_ACTION_EDIT') }}':
								url = '{{ app.url_generator.generate('p_object_edit', {'sObjectClass': '-objectClass-', 'sObjectId': '-objectId-'})|raw }}'.replace(/-objectClass-/, item.class).replace(/-objectId-/, item.id);
								actionElem.attr('data-toggle', 'modal').attr('data-target', '#modal-for-all').attr('href', url);
								break;
							case '{{ constant('Combodo\\iTop\\Portal\\Brick\\BrowseBrick::ENUM_ACTION_CREATE_FROM_THIS') }}':
								url = action.url.replace(/-objectClass-/, item.class).replace(/-objectId-/, item.id);
								url = AddParameterToUrl(url, 'ar_token', item.action_rules_token[action.type]);
								actionElem.attr('data-toggle', 'modal').attr('data-target', '#modal-for-all').attr('href', url);
								break;
							default:
								//console.log('Action "'+action.type+'" not implemented for secondary action');
								break;
						}
						
						// Adding title if present
						if(action.title !== undefined)
						{
							actionElem.attr('title', action.title);
						}
						// Adding icon class if present
						if(action.icon_class !== undefined)
						{
							actionIconElem.addClass(action.icon_class);
						}
						
						if(bHasSeveralSecondaryActions)
						{
							actionElem.append(action.title);
							actionsSSMenuContainerElem.append( $('<p></p>').append(actionElem) );
						}
						else
						{
							actionsElem.append(actionElem);
						}
					}
				}
				
				// Building subnodes if necessary
				if(item.subitems.length !== 0)
				{
                    var subitemsElem;
				    if($('div[data-level-id="'+levelId+'"]').length > 0)
					{
                        subitemsElem = $('div[data-level-id="'+levelId+'"]');
					}
					else
					{
					    subitemsElem = $('<div></div>').addClass('grid-group').attr('data-level-id', levelId);
                        $('div[data-level-id="'+nodeId+'"]').after(subitemsElem);
					}
					buildGrid(item.subitems, levelId, false);
				}				
			});
			
			// Update listeners
			if(isRootLevel)
			{
				registerToggleListeners();
			}
		};
		
		$(document).ready(function(){
			// Auto collapse item actions popup
			$('body').click(function(){
				$('#brick_content_grid .item-action-wrapper.collapse.in').collapse('hide');
			});
			
			// Build the tree (collapsed)
			showGridLoader();
			buildGrid(oRawDatas);
			hideGridLoader();
			registerFilterListeners();
		});
	</script>
{% endblock %}